<template>
  <div class="call-chart-box">
    <div :class="[chartTypeClass]">
      <div class="head">
        <i class="iconfont icon-fangkeduanyonghutouxiang" v-if="chartTypeClass === 'customer'"></i>
        <img v-show="user_pic" :src="user_pic" v-else />
      </div>
      <span class="time-span" :class="chartTypeClass === 'customer'?'customer-time':''">
        <span>{{content.callTime.substring(content.callTime.indexOf(' ')+1)}} </span>
        <span>{{chartTypeClass === 'customer'?'客户':getAgentName()}}</span>
      </span>
      <div class="writtenWords">
        <div  v-html="content.callText" @click ='wordsClick'></div>
        <i class="search el-icon-search" @click.stop='queryXbot' v-if="chartTypeClass === 'customer'"></i>
      </div>
      <span v-if="showParticiple && chartTypeClass === 'customer'" @click.stop='taggingClick' class="iconfont icon-fenci" :class="active?'active-fenci':''"></span>
    </div>
    <p v-if="content.callSensitiveText" class="sensitive-text" :class="chartTypeClass === 'customer'?'customer-sensitive':''">
      <i class="iconfont icon-minganci"></i>敏感词：{{content.callSensitiveText}}
    </p>
  </div>
</template>
<script>
import * as callType from '@/store/modules/call/mutation-types'

  export default {
    name: 'call-chart-box',
    data () {
      return {
        active: false
      }
    },
    props: {
      data: {
        type: Object,
        default: {}
      },
      showParticiple: {
        type: Boolean,
        default: true
      },
      userPic: {
        type: String,
        default: ''
      },
      agentId: {
        type: String,
        default: ''
      },
      transData:{
        type:Object,
        default:{}
      }
    },
    components: {

    },
    computed: {
      chartTypeClass () {
        return this.data.callType === 'customer' ? 'customer' : 'agent'
      },
      user_pic () {
        let tempUrl = ''
        // 父组件可能传null 走默认头像
        if (this.userPic || this.userPic === null) {
          tempUrl = this.userPic
        } else {
          tempUrl = this.$store.state.session.user.im_icon ? this.$store.state.session.user.im_icon + '?imageView2/1/w/50/h/50' : ''
        }
        return tempUrl
      },
      content () {
        return this.data
      }
    },
    methods: {
      getAgentName () {
        let agents = this.$store.getters.agents || {}
        let current = '座席'
        const agentObj = agents[this.agentId] || agents[this.$store.state.session.sessionId]
        if (agentObj) {
          current = agentObj.displayName + '[' + agentObj.exten + ']'
        }
        return current
      },
      taggingClick () {
        //点击实时转写后的查询小图标触发
        if (!this.active) {
          this.active = true
          this.startText = this.content.callText
          this.$store.dispatch('getWordSegmentation', {text: this.startText}).then(resp => {
            if (resp && resp.success) {
              if (resp.data && resp.data.length > 0) {
                let dataList =  Array.from(new Set(resp.data))
                dataList.forEach((item, index) => {
                  if (index === 0) {
                    this.$store.state.isShowTransCallLibrary = true
                    this.$store.commit('call/SET_PARTICIPLE_CON', item)
                  }
                  let reg = '/' + item + '/g' // 替换为需要标注的词
                  this.content.callText = this.content.callText.replace(eval(reg), '<span>' + item + '</span>')
                })
              }
            }
          })
        } else {
          this.active = false
          this.content.callText = this.startText
        }
      },
      queryXbot(){
        let xRobotId = window.sessionStorage.getItem('xRobotId')
        if(!xRobotId){
          return
        }else{
          //只有当前点击的查询是打开的卡片里的，才去请求接口
          if(this.transData.CALL_SHEET_ID && this.$route.params.id && this.transData.CALL_SHEET_ID == this.$route.params.id){
              let params = {
                robot:xRobotId,
                question:this.content.callText
              }
              this.$store.dispatch('getScriptRecommendations',params).then(res=>{
                if(res.success){
                  console.log(res.data);
                  this.$store.commit('call/INTELLIGENT_RECOMMEND',res.data)
                }
              })
          }
        }
      },
      wordsClick (e) {
        if (e.target.localName === 'span') {
          let tagContent = e.target.innerText // 标注的内容
          this.$store.state.isShowTransCallLibrary = true
          this.$store.commit('call/SET_PARTICIPLE_CON', tagContent)
        }
      }
    },
    created () {

    }
  }
</script>
<style lang='stylus' scoped>
.call-chart-box
  margin-bottom 30px
  .sensitive-text
    .iconfont
      color #F96C69
   position relative
  .agent
    display flex
    flex-direction row
    align-items top
    flex-direction row-reverse
    align-items top
    .writtenWords
      > span
        display inline-block
        flex-direction row
        flex-wrap wrap
     
      display inline-block
      flex-direction row
      flex-wrap wrap
      align-items start
      color black
      padding: 8px 12px
      position: relative
      margin-left 3px
      margin-right: 10px
      border-radius: 14px
      background: #f0f0f0
      display: inline-block
      color: #000
      max-width 70%
      word-break: break-word
      white-space: normal
      vertical-align inherit
    .writtenWords:after
        border-top: 6px solid transparent;
        border-bottom: 6px solid transparent;
        border-right: 6px solid #f0f0f0;
        content: ' ';
        position: absolute;
        width: 0;
        height: 0;
        right: -8px;
        top: 10px;
        border-radius: 1px;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        border: 5px solid #f0f0f0;
        border-color: #f0f0f0 transparent transparent #f0f0f0;
    
    .head
      display inline-block
      background-color white
      background url("../../public-modules/contact-summary/img/agent.png") no-repeat 50% 50%
      background-size cover
      img
        background white
        width 32px
        margin-top -1px
  .customer
    display flex
    flex-direction row
    align-items top
    .writtenWords
      > span
        display inline-block
        flex-direction row
        flex-wrap wrap
      display inline-block
      flex-direction row
      flex-wrap wrap
      align-items start
      color black
      padding: 8px 15px
      position: relative
      margin-left: 10px
      border-radius: 14px
      background: #cce6ff
      color: #000
      max-width 70%
      word-break: break-word
      white-space: normal
      margin-right 3px
      vertical-align inherit
      &:hover{
        .search{
          display inline-block
        }
      }
    .writtenWords:after
        border-top: 6px solid transparent;
        border-bottom: 6px solid transparent;
        border-right: 6px solid #cce6ff;
        content: ' ';
        position: absolute;
        width: 0;
        height: 0;
        left: -8px;
        top: 10px;
        border-radius: 1px;
        -webkit-transform: rotate(95deg);
        transform: rotate(95deg);
        border: 5px solid #cce6ff;
        border-color: #cce6ff transparent transparent #cce6ff;
    .writtenWords .search
        position absolute
        bottom 5px
        right 3px
        color #000
        display none

    .head
      background-color: #3cc1f7
  .head
    color: white
    height: 32px
    width: 32px
    border-radius: 50%
    box-sizing: border-box
    text-align: center
    display: inline-block
    line-height: 32px
    overflow hidden
  .icon-fenci
    color #ccc
    display flex
    align-items center
  .active-fenci
    color #459ae9
</style>
<style lang='stylus'>
  .writtenWords >div >span
    color red
    display inline-block
    flex-direction row
    flex-wrap wrap
    margin 0 2px 0
  .writtenWords *
    vertical-align baseline
  .el-menu-item
    .call-chart-box
      i
       color white
  .time-span
     position absolute
     top -20px
     right 46px
     color #595959
  .customer-time
    left 46px
    right auto
  .sensitive-text
    text-align right
    padding-right 46px
    box-sizing border-box
    color #F96C69
    .iconfont
      color #F96C69
  .customer-sensitive
    padding-left 46px
    text-align left
</style>
